<template>
  <div class="artinfo">
    <div class="wrap-img" >
      <img class="  img-blur-done" :src="getFirstImg(data.imgUrl)" alt="120">
    </div>
    <div class="content">
      <div class="title" @click="detail(data.id)">{{data.title}}</div>
      <p class="abstract">
        {{data.content}}
      </p>
      <div class="meta">
        <span class="jsd-meta">
          <Icon type="ios-heart-outline" />
          {{data.likeNum}} &nbsp;&nbsp;
        </span>
        <span >
          <Icon type="ios-chatbubbles-outline" />
          {{data.commentNum}} &nbsp;&nbsp;
        </span>
        <a class="nickname"  >{{data.nickname}}</a>
        &nbsp;&nbsp;
        <span>{{data.createTime}}</span>
      </div>
      <slot name="action"></slot>
    </div>
    <article-detail v-model="detailVisible" :data="detailData"></article-detail>
  </div>
</template>

<script>
import {getArticleDetail} from "@/api/article/article";
import articleDetail from "@/views/my-components/article/article-detail";
export default {
  name: "article-card",
  components: {
    articleDetail
  },
  props: ['data'],
  data(){
    return {
      detailVisible: false,
      detailData: {}
    }
  },
  methods: {
    getFirstImg(img){
      let imgArr = img.split(",");
      if(imgArr.length > 0){
        return imgArr[0];
      }else {
        return null;
      }
    },
    detail(id){
      let _this = this;
      getArticleDetail({id: id}).then(res => {
        _this.detailData = res.result;
        _this.detailVisible = true;
      })
    },

  },

}
</script>

<style lang="less">
.artinfo {
  position: relative;
  width: 80%;
  margin: 0 0 15px;
  padding: 15px 2px 20px 0;
  border-bottom: 1px solid #f0f0f0;
  word-wrap: break-word;


  .wrap-img {
    position: absolute;
    top: 50%;
    margin-top: -60px;
    right: 0;
    width: 125px;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      border: 1px solid #f0f0f0;
    }
  }

  .content {
    padding-right: 165px;

    .title {
      cursor:pointer;
      color: #333;
      margin: -7px 0 4px;
      display: inherit;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
    }

    .abstract {
      margin: 0 0 8px;
      font-size: 13px;
      line-height: 24px;
      color: #999;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      display: -webkit-box;
      -webkit-line-clamp: 2; // 超出多少行
      -webkit-box-orient: vertical;
    }

    .meta {
      padding-right: 0!important;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;

      span {
        color: #b4b4b4;
      }
      a {
        margin-right: 10px;
        color: #b4b4b4;
        cursor: pointer;
      }
    }


  }

}

</style>